<template>
	<scroll-view scroll-y="true">
		<div class="page">
			<div class="section pitch_sm last-pitch_clear p_default">
				<div class="align-items_center">
					<div>
						<u--image shape="circle" width="2rem" height="2rem" :src="good.avatar" />
					</div>
					<div class="flex px_sm">
						<p class="username">{{ good.username }}</p>
					</div>
				</div>
				<div class="">
					<div class="price h3 align-items_center">
						<small class="dollar">¥</small>{{ good.price
            }}<small class="unit" v-if="good.unit">/{{ good.unit }}</small>
					</div>
				</div>
				<div class="row">{{ good.description }}</div>
				<div class="row">
					<u--image v-for="item in good.pictures" :key="item" width="100%" :src="item" />
				</div>
			</div>
		</div>
		<div class="footer-bar px_sm py_xs">
			<div class="align-items_center justify_between">
				<div></div>
				<div class="align-items_center btn-group">
					<div>
						<u-button class="mx_sm" type="primary" size="small" shape="circle">下架</u-button>
					</div>
					<div>
						<u-button type="primary" size="small" shape="circle">确认交易</u-button>
					</div>
				</div>
			</div>
		</div>
	</scroll-view>
</template>

<script>
	import {
		getGood
	} from '@/api/good.api';
	import {
		navigate
	} from '../../service/navigate';
	export default {
		data() {
			return {
				good: {},
			};
		},
		methods: {
			navigate,
		},
		onLoad(id) {
			getGood(Number(id)).then(({
				result
			}) => {
				this.good = result;
			});
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/static/variables.scss';

	.page {
		margin-bottom: 50px;
	}

	.price {
		font-weight: bold;
		color: #ff4f24;

		.dollar {
			font-size: 12px;
		}

		.unit {
			font-size: 14px;
		}
	}

	.footer-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		height: 50px;
		box-sizing: border-box;
		background: $white-color;
		border-top: solid 1px map-get($border-colors, default);
	}

	.btn-group {
		gap: 12px;
	}
</style>